<template>
    <div class="census-container">
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card>
                    <div slot="header">商品总览</div>
                    <span>商品内容</span>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card>
                    <div slot="header">用户总览</div>
                    <span>用户内容</span>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card>
                    <div slot="header">销售总览</div>
                    <span>销售内容</span>
                </el-card>
            </el-col>
        </el-row>
        <Charts />
        <!-- <div class="chart">
            <h1>这里有个图表</h1>
        </div> -->
    </div>
</template>

<script>
import Charts from '@/components/Charts'

export default {
    name: "Census",
    components: {
        Charts
    }
}
</script>

<style lang="less">
.census-container {
    .el-row{
        margin-bottom: 10px;
    }
    .el-card {
        background-color: #c4dff6;
        border: none;
        &:hover {
            box-shadow: 0 0 5px #666;
        }
        span {
            font-size: 13px;
        }
    }
    .chart {
        text-align: center;
        height: 500px;
        background-color: lightgreen;
    }
}
</style>
